<template>
    <div class="cj-box" @click="openUrl">
        <div class="tit-h1">沉浸模式</div>
        <img class="rotating-image" src="../../assets/img/1703238783583.jpg" alt="">
        <div class="tit-h2">點擊荧幕</div>
        <div class="tit-h2">關閉沉浸模式</div>
    </div>
  </template>
  
  <script setup>
import { ref } from "vue";
  import { useRouter } from "vue-router";
  const router = useRouter();
  import { reactive, toRefs } from 'vue';
  
  const openUrl = () => {
    // router.back();
    router.back();
};
  </script>
  
  <style lang="scss" scoped>
    .cj-box{
        padding: 83px;
        text-align: center;
        .tit-h1{
            font-family: SSZhuiGuangShouXieTi;
            color: #252626;
            font-size: 56px;
        }
        .tit-h2{
            font-family: PingFangTC, PingFangTC;
            color: #252626;
            font-size: 33px;
            margin-bottom: 10px;
        }
        .rotating-image {
            margin: 76px 0;
            display: inline-block;
            animation: rotate 2s linear infinite; /* 2s为旋转一周的时间，可以根据需要调整 */
        }

        @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
        }
    }
  </style>
  